<template>
  <div
    ref="homeRef"
    v-loading="isLoading"
    class="home-container"
    @wheel="handlerWheel"
  >
    <ul
      class="banner-list"
      @transitionend="switching = false"
      :style="{ marginTop: bannerUlMarginTop + 'px' }"
    >
      <li v-for="item in bannerList" :key="item.id">
        <CarousIitem :item="item" />
      </li>
    </ul>
    <div v-show="currentIndex > 0" class="icon-arrow-up">
      <Icon type="arrowUp" @click="switchBanner(currentIndex - 1)" />
    </div>
    <div v-show="currentIndex < bannerList.length - 1" class="icon-arrow-down">
      <Icon type="arrowDown" @click="switchBanner(currentIndex + 1)" />
    </div>
    <ul class="indiicator">
      <li
        v-for="(t, i) in bannerList"
        @click="switchBanner(i)"
        :key="i"
        :class="{ acitive: i == currentIndex }"
      ></li>
    </ul>
  </div>
</template>

<script>
import { CarousIitem } from "./components";
import { mapState } from "vuex";
import Icon from "@/components/Icon";
export default {
  name: "Home",
  components: {
    CarousIitem,
    Icon,
  },
  data() {
    return {
      currentIndex: 0,
      containerHeight: 0,
      switching: false,
    };
  },
  created() {
    this.fetchData();
  },
  mounted() {
    this.containerHeight = this.$refs.homeRef.clientHeight;
    window.addEventListener("resize", this.resizeChange);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChange);
  },
  computed: {
    ...mapState("banner", ["bannerList", "isLoading"]),
    bannerUlMarginTop() {
      return -this.containerHeight * this.currentIndex;
    },
  },
  methods: {
    async fetchData() {
      await this.$store.dispatch("loginUser/login");
      if (this.bannerList.length) {
        return;
      } else {
        await this.$store.dispatch("banner/fetchBannerList");
      }
    },
    handlerWheel(e) {
      if (this.switching) {
        return;
      }
      //向下滚动 向上翻页
      if (e.deltaY > 20 && this.currentIndex > 0) {
        this.switching = true;
        this.currentIndex--;
      }
      //想上滚动 向下翻页
      if (e.deltaY < -20 && this.currentIndex < this.bannerList.length - 1) {
        this.switching = true;
        this.currentIndex++;
      }
    },
    switchBanner(index) {
      this.currentIndex = index;
    },
    resizeChange() {
      this.containerHeight = this.$refs.homeRef.clientHeight;
    },
  },
};
</script>

<style scoped lang="less">
@import "@/styles/var.less";
.home-container {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;

  .banner-list {
    width: 100%;
    height: 100%;
    transition: 500ms ease-in-out;

    li {
      width: 100%;
      height: 100%;
    }
  }

  .icon-arrow-up {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: jump-up 2s infinite;
  }
  .icon-arrow-down {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: jump-down 2s infinite;
  }

  @keyframes jump-up {
    0% {
      transform: translate(50%, -10px);
    }
    50% {
      transform: translate(50%, 0px);
    }
    100% {
      transform: translate(50%, -10px);
    }
  }

  @keyframes jump-down {
    0% {
      transform: translate(50%, 10px);
    }
    50% {
      transform: translate(50%, 0px);
    }
    100% {
      transform: translate(50%, 10px);
    }
  }

  .icon-container {
    font-size: 28px;
    font-weight: 900;
    cursor: pointer;
    color: @gray;
  }

  .indiicator {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    li {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid #ddd;
      margin-bottom: 10px;
      cursor: pointer;

      &.acitive {
        background-color: @primary;
      }
    }
  }
}
</style>
